<template>
  <div>
    拖拽容器
    <cc-drag-container container-type="output" :list="outList" :isPutData="true">
      <cc-drag-bar v-for="item in outList" :data="item">
        <span class="drag-bar">{{item.name}}</span>
      </cc-drag-bar>
    </cc-drag-container>
    <br>
    <cc-drag-container container-type="input" :list="inputList" @receiveData="receiveData">
      <span v-for="item in inputList" :data="item">
        <span class="drag-bar">{{item.name}}</span>
      </span>
    </cc-drag-container>
  </div>
</template>

<script>
  import CcDragContainer from '../../components/CcDrag/CcDragContainer'
  import CcDragBar from '../../components/CcDrag/CcDragBar'
	export default {
		name: "Drag",
    data() {
			return {
				outList: [
					{
						value: 1,
						name: '拖拽块1',
					},
					{
						value: 2,
						name: '拖拽块2',
					},
					{
						value: 4,
						name: '拖拽块4',
					},
        ],
        inputList: [
					{
						value: 3,
						name: '拖拽块3',
					},
        ]
      }
    },
    components: {
			CcDragContainer,
			CcDragBar
    },
    methods: {
			receiveData(data) {
				this.inputList.push(data);
      },
    }
	}
</script>

<style scoped>
  .topZIndex{
    z-index: 22;
  }
  .colNames{
    width: 70px;
    height: 25px;
    background: white;
    border: 1px solid #ddd;
    margin: 5px;
  }
  .drag-bar{
    display: inline-block;
    cursor: pointer;
    width: auto;
    height: auto;
    background: white;
    margin: 5px;
    padding: 0 3px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
</style>
